<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>视频分享页</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <!-- <link rel="stylesheet" type="text/css" href="../../css/main.css" /> -->
    <style>
    body {
        background-color: #fff;
    }

    .video {
        height: 211px;
        width: 100%;
        background-color: #000;
    }
    .test {
        position: relative;
    }
    .title {
        border-bottom: 8px solid #d7d7d7;
        padding: 5px 15px;
    }


    .title_first {
        height: 30px;
        line-height: 30px;
    }
    .lists {
        padding: 8px 15px 0px 15px;
    }
    .tupian {
        position: relative;
        float: left;
        width: 43%;
    }

    .tupian .videotype {
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 9;
        background-color: rgba(243, 152, 0, 0.9);
        color: #fff;
        padding: 0px 8px;
        font-size: 12px;
        border-radius: 5px;
    }

    .img_picture {
        width: 100%;
        height: 80px;
        display: inline-block;
    }

    .content1 {
        width: 52%;
        float: left;
        height: 88px;
        padding: 10px 0px 0px 7px;
    }

    .content_wenzi {
        font-size: 11px;
        color: #A7A7A7;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 3px;
    }

    .shuoming {
        font-size: 10px;
        position: absolute;
        bottom: 5px;
        color: #A7A7A7;
    }

    .right {
        right: 0px;
    }

    .top_right {
        position: absolute;
        top: 10px;
        right: 20px;
        background-color: rgba(10, 9, 26, 0.5);
        padding: 0px 10px;
        height: 22px;
        line-height: 22px;
        font-size: 11px;
        border-radius: 12px;
        text-align: center;
        color: #fff;
    }

    .button {
        margin: 8px 23px;
        background-color: #EA5413;
        color: #fff;
        font-size: 15px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-radius: 13px;
    }

    .img_back {
        width: 9px;
        position: absolute;
        top: 36px;
        left: 19px;
    }
    .wz_introduction{
      color: #fff;
      font-size: 15px;
      position: absolute;
      top:50%;
      right: 50%;
      margin-right: -109px;
      margin-top: -20px;
    }
    .strum-one {
        height: 46px;
        line-height: 46px;
        color: #737373;
        font-size: 15px;
        position: relative;
        border-top: 1px solid #C7C8C8;
    }

    .learn {
        position: absolute;
        width: 28px;
        height: 27px;
        left: 21px;
        top: 9px;
    }

    .strum-down {
        position: absolute;
        right: 16px;
        top: 9px;
        width: 59px;
        height: 24px;
        background: #ea5413;
        border: 1px solid #ea5413;
        color: #fff;
        line-height: 24px;
        border-radius: 7px;
    }
    .cha {
        width: 15px !important;
        height: 15px !important;
        margin-top: 17px;
        margin-left: 17px;
    }
    .last {
        text-align: center;
        background: #fff;
        width: 200px;
        height: 200px;
        left: 50%;
        top: 50%;
        position: absolute;
        margin-left: -100px;
        margin-top: 100px;
        color: #dedede;
    }

    .cat {
        width: 118px;
        height: 90px;
        margin: 0 auto;
    }

    .content {
        margin-top: 24px!important;
    }
    </style>
</head>

<body>
    <div id="vm">
      <header class="aui-bar aui-bar-nav" id="aui-header" style="background-color:#fff;color:#000;">
         <div class="aui-pull-left" onclick="closeWin()" style="font-size:13px;">
             <img src="close-one.png" class="cha" alt="">
         </div>
         <div class="aui-title">{{sharetitle}}</div>
     </header>
     <div class="strum-one">
         <img src="xuexue.png" alt="" class="learn"> <span style="margin-left:70px;">音乐教学尽在学学</span>
         <button type="button" class="strum-down">下载</button>
     </div>

       <div class="video test">
         <div class="wz_introduction">试看结束，打开APP查看更多视频</div>
       </div>

       <div class="title">
           <div class="button">打开APP,看更多教学视频</div>
           <div class="aui-clearfix"></div>
       </div>
       <div class="lists">
           <div v-if="isauthorvideolistflag">

               <div style="font-size:13px;color:#a5a5a5">作者其他视频</div>
               <div style="margin-top:5px;" v-for="item in authorvideolist">
                   <div class="tupian">
                       <span class="videotype">{{videotype(item.video_type)}}</span>
                       <img v-bind:src="item.img" alt="" class="img_picture">
                   </div>
                   <div class="content1 test">
                       <p class="content_title">{{item.video_name}}</p>
                       <p class="content_wenzi">{{item.video_introduce_small}}</p>
                       <div class="shuoming">观看人次：{{item.watch_count}}</div>
                   </div>
                   <div class="aui-clearfix"></div>
               </div>
           </div>
           <div v-else>
               <div style="font-size:13px;color:#a5a5a5">相关视频</div>

               <div class="last">
                   <img src="../../image/home/cat_1.png" alt="" class="cat">
                   <div class="content">暂无相关视频</div>
               </div>
           </div>

       </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
var uid = $api.getStorage('uid');

    var vm = new Vue({
        el: '#vm',
        data: {
          sharetitle: '',
          videoid:'',
          authorvideolist: [],
          videodetial:{},
          isauthorvideolistflag:false
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }

            }
        },
        methods: {
            init: function() {
                var _this = this;
                _this.sharetitle=api.pageParam.sharetitle;
                _this.videoid=api.pageParam.videoid;
                _this.getdetail()
            },
            getdetail() {
                var _this = this;
                if(uid){
                  var data1={
                    video_id: _this.videoid,
                    uid: uid
                  }
                }else{
                  var data1={
                    video_id: _this.videoid,
                    uid: ''
                  }
                }
                new rest().get('getDetail').datae(data1).success(function(res) {
                    console.log(JSON.stringify(res))
                    if (res.flag == 1) {
                        _this.videodetial = res.msg;
                        // if (typeof back == 'function') {
                        //     back(res.msg)
                        // }
                        // 获取作者相关视频

                        _this.getauthorvideo(res.msg.author_id);
                    }
                }).error(function(err) {
                    console.log(JSON.stringify(err))
                }).run()

            },
            videotype: function(res) {
                if (res == 2) {
                    return 'VIP'
                } else if (res == 3) {
                    return '大咖'
                } else {
                    return '免费'
                }
            },
            getauthorvideo(authorid) {
                var _this = this;
                // 作者相关视频
                new rest().post('getAuthorVideo').datae({
                    author: authorid,
                    video_id: _this.videoid,
                }).success(function(res) {

                    if (res.flag == 1) {
                        if (res.msg.length > 0) {
                            _this.authorvideolist = res.msg;
                            _this.isauthorvideolistflag = true;
                        } else {
                            _this.isauthorvideolistflag = false;
                        }
                    } else {
                        api.toast({
                            msg: res.msg,
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                }).error(function(err) {
                    api.toast({
                        msg: err.msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }).run()
            },
        }
    })

</script>

</html>
